<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="myDiv"><h2 id="myh2">使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>


<script>
    function loadXMLDoc()
    {
        console.log(123);

        // 发送请求给后端接口，使用后端接口返回的字符串进行内容替换即可

        // 创建ajax请求核心对象
        var xmlhttp=new XMLHttpRequest();

        // 设置请求的发送方式
        // 参数1： 请求的类型，get或者post
        // 参数2： 请求的url
        // 参数3： 同步还是异步，true代表异步

        // 注意，该方法执行完后不会真正发请求，直到调用了send方法时，才会向后端接口发请求
        xmlhttp.open("GET","/hello",true);

        //绑定 回调 函数
        xmlhttp.onreadystatechange=function()
        {
            // 核心对象的 状态属性 readyState如果等于4了，那么就说明服务器端已经把结果响应回来了
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                // 通过xmlhttp.responseText可以获取服务器端返回的字符串数据
                document.getElementById("myh2").innerHTML=xmlhttp.responseText;
            }
        }

        // 真正发起请求
        xmlhttp.send();

        // 使用js 代码局部更新页面内容
        // document.getElementById("myh2").innerText="hello ajax";
    }
</script>
</body>
</html>
